<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制并录入选区数据</title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="./index.css">
    <script src="../../lib/konva@9.3.12.min.js"></script>
    <script defer src="../../lib/opencv@4.5.5.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="draw_rect" class="page_root">
        <div id="container"></div>
        <div class="op_box">
            <button class="op-button" id="btn_start1">选择背包区域</button>
            <button class="op-button" id="btn_prev_step">上一步</button>
            <button class="op-button" id="btn_start2">选择符石案例区域</button>
            <button class="op-button" id="btn_restart">重绘</button>
            <button class="op-button" id="btn_quit">退出</button>
            <button class="op-button" id="btn_ok">确认</button>
            <button class="op-button" id="btn_back">返回</button>
            <button class="op-button" id="btn_finish">完成</button>
        </div>

        <div id="check_menu" class="check_menu">
            <table id="check_table">
                <!-- <thead>
                    <tr>
                        <td class="name"></td>
                        <td class="value"></td>
                    </tr>
                </thead> -->
                <tbody>
                    <tr>
                        <td class="name">选区区域</td>
                        <td id="td-rune_rect" class="value">
                            <!-- <img id="rune_rect_img" src="" alt=""> -->
                        </td>
                    </tr>
                    <tr>
                        <td class="name">符石模板</td>
                        <td id="td-rune_img" class="value">
                            <img id="rune_img" src="../../imgs/runes/rune_1_SIL.png" alt="">
                        </td>
                    </tr>
                    <tr>
                        <td class="name">符石名称</td>
                        <td id="rune_name" class="value">
                            <select id="select_rune" onchange="selectRune()">
                                <option value="SIL" selected>SIL</option>
                                <option value="ZER">ZER</option>
                                <option value="MON">MON</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="name">符石匹配结果</td>
                        <td id="td-result" class="value">
                            <button class="op-button" id="btn_match">开始匹配</button>
                            <span class="tip-failed">匹配失败</span>
                            <button class="op-button" id="btn_rematch">重新匹配</button>
                        </td>
                    </tr>

                    <!-- <tr>
                        <td class="name">数量匹配结果</td>
                        <td id="canvas2" class="value">结果</td>
                    </tr>
                    <tr>
                        <td class="num name">数量</td>
                        <td id="num" class="value">结果</td>
                    </tr>
                    <tr>
                        <td class="name">数量匹配测试用</td>
                        <td id="canvas2_t" class="value">结果</td>
                    </tr> -->
                </tbody>
            </table>
        </div>

        <div id="match_result_show">
            <canvas width="150" height="150" id="canvas1"></canvas>
            <canvas width="150" height="150" id="canvas2"></canvas>
            <canvas width="150" height="150" id="canvas2_t"></canvas>
            <!-- Rune模板图片  -->
            <!-- <canvas style="display: block;" id="templateCanvasInput" width="66" height="72"></canvas> -->
            <canvas style="display: block;" id="templateCanvasInput" width="88" height="96"></canvas>
            <!-- Rune模板图片放大显示，测试使用 -->
            <!-- <canvas style="display: block;" id="templateCanvasInput_tt" width="130" height="130"></canvas> -->
            <!-- 展示Rune区域并标记num区域-->
            <canvas style="display: none;" id="rune_num_marked_Canvas" width="150" height="150"></canvas>
            <div id="pick_rect"></div>
            <canvas style="display: none;" id="rune_contour_rects" width="150" height="150"></canvas>
            <!-- 展示Rune选区并标记Rune选框-->
            <canvas style="display: none;" id="rune_rect_marked_Canvas" width="150" height="150"></canvas>
            <canvas style="display: block;" id="ttt" width="150" height="150"></canvas>
            <!-- 数字模板图片 -->
            <canvas style="display: none;" id="templateNumCanvasInput" width="40" height="40"></canvas>
            <!-- 展示数字区域  -->
            <canvas style="display: none;" id="numCanvas" width="40" height="40"></canvas>
            <!-- 展示背包区域并标记Rune区域 -->
            <canvas style="display: none;" id="bag_rune_marked_Canvas" width="1000" height="800"></canvas>
            <!-- 截图数据原图不显示 -->
            <canvas style="display: none;" id="imageCanvasInput" width="1080" height="2400"></canvas>
            <!-- 展示截图数据并标记出背包区域 -->
            <canvas style="display: block;" id="screenshot_bag_marked_Canvas" width="1080" height="2400"></canvas>


            <!-- 背包模板图片 不显示 -->
            <canvas style="display: none;" id="templateBagCanvasInput" width="962" height="795"></canvas>
            <!-- 所有数字模板图片 不显示 -->
            <div id="templ_list" style="display: none;"></div>
        </div>
    </div>

    <script type="text/javascript" src="../../common/utils/my_opencv_fun.js"></script>
    <script type="text/javascript" src="./index.js"></script>
</body>

</html>